<style>
.tiles .cell {flex: none; min-width: 5rem}
.tiles .cell-lg {flex: none; min-width: 7.5rem}
.tiles .tile {padding: .25rem .5rem;}
.focus-item {position: relative;}
.focus-item:before,
.focus-item:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  transition: .2s;
  opacity: 0;
  pointer-events: none;
}
.focus-item:after {
  background-color: rgba(0, 255, 0, .2);
  right: 0;
  bottom: 0;
  border: .05rem solid rgb(98, 224, 81);
}
.focus-item:before {
  content: attr(class);
  background-color: rgb(98, 224, 81);
  color: #fff;
  padding: .05rem .5rem;
  transform: translate(0, -100%);
  z-index: 2;
  text-shadow: 0 .05rem .1rem rgba(0,0,0,.5);
  border-right: .05rem solid rgba(0,0,0,.1);
  border-bottom: .05rem solid rgba(0,0,0,.1);
}
.section.focus-item:before {content: '.section';}
.layer.focus-item:before {content: '.layer';}
.box.focus-item:before {content: '.box';}
.canvas.focus-item:before {content: '.canvas';}
.well.focus-item:before {content: '.well';}

.show-focus-item .focus-item {overflow: hidden;}
.show-focus-item .focus-item:before,
.show-focus-item .focus-item:after {
  opacity: 1;
  transform: translate(0, 0);
}
</style>

<div class="section focus-item">
  <div class="heading"><div class="title"><strong>背景着色</strong></div></div>
  <div class="box">
    <p>背景着色会更改元素的背景色和具备对比鲜明的文本颜色。</p>
  </div>
  <div class="container">
    <div class="row tiles">
      <div class="cell"><div class="tile primary">.primary</div></div>
      <div class="cell"><div class="tile secondary">.secondary</div></div>
      <div class="cell"><div class="tile accent">.accent</div></div>
      <div class="cell"><div class="tile success">.success</div></div>
      <div class="cell"><div class="tile danger">.danger</div></div>
      <div class="cell"><div class="tile warning">.warning</div></div>
      <div class="cell"><div class="tile info">.info</div></div>
      <div class="cell"><div class="tile special">.special</div></div>
      <div class="cell"><div class="tile important">.important</div></div>
      <div class="cell"><div class="tile dark">.dark</div></div>
      <div class="cell"><div class="tile inverse">.inverse</div></div>
    </div>
    <div class="row tiles">
      <div class="cell"><div class="tile green">.green</div></div>
      <div class="cell"><div class="tile red">.red</div></div>
      <div class="cell"><div class="tile yellow">.yellow</div></div>
      <div class="cell"><div class="tile blue">.blue</div></div>
      <div class="cell"><div class="tile purple">.purple</div></div>
      <div class="cell"><div class="tile brown">.brown</div></div>
      <div class="cell"><div class="tile black">.black</div></div>
    </div>
    <div class="row tiles">
      <div class="cell cell-lg"><div class="tile primary-pale">.primary-pale</div></div>
      <div class="cell cell-lg"><div class="tile secondary-pale">.secondary-pale</div></div>
      <div class="cell cell-lg"><div class="tile accent-pale">.accent-pale</div></div>
      <div class="cell cell-lg"><div class="tile success-pale">.success-pale</div></div>
      <div class="cell cell-lg"><div class="tile danger-pale">.danger-pale</div></div>
      <div class="cell cell-lg"><div class="tile warning-pale">.warning-pale</div></div>
      <div class="cell cell-lg"><div class="tile info-pale">.info-pale</div></div>
      <div class="cell cell-lg"><div class="tile special-pale">.special-pale</div></div>
      <div class="cell cell-lg"><div class="tile important-pale">.important-pale</div></div>
    </div>
    <div class="row tiles">
      <div class="cell cell-lg"><div class="tile green-pale">.green-pale</div></div>
      <div class="cell cell-lg"><div class="tile red-pale">.red-pale</div></div>
      <div class="cell cell-lg"><div class="tile yellow-pale">.yellow-pale</div></div>
      <div class="cell cell-lg"><div class="tile blue-pale">.blue-pale</div></div>
      <div class="cell cell-lg"><div class="tile purple-pale">.purple-pale</div></div>
      <div class="cell cell-lg"><div class="tile brown-pale">.brown-pale</div></div>
      <div class="cell cell-lg"><div class="tile gray">.gray</div></div>
      <div class="cell cell-lg"><div class="tile white">.white</div></div>
    </div>
  </div>
  <div class="box">
    <p>为元素应用 <code>.clean</code> 会充重置背景色为透明。</p>
  </div>
  <div class="box">
    <p>为元素应用 <strong class="code highlight">.highlight</strong> 来启用荧光笔高亮背景。</p>
  </div>
</div>

<div class="section focus-item">
  <div class="heading"><div class="title"><strong>文本着色</strong></div></div>
  <div class="box">
    <p>文本着色会更改文本的颜色。</p>
  </div>
  <div class="container">
    <div class="row tiles">
      <div class="cell cell-lg"><div class="tile text-primary">.text-primary</div></div>
      <div class="cell cell-lg"><div class="tile text-secondary">.text-secondary</div></div>
      <div class="cell cell-lg"><div class="tile text-accent">.text-accent</div></div>
      <div class="cell cell-lg"><div class="tile text-success">.text-success</div></div>
      <div class="cell cell-lg"><div class="tile text-danger">.text-danger</div></div>
      <div class="cell cell-lg"><div class="tile text-warning">.text-warning</div></div>
      <div class="cell cell-lg"><div class="tile text-info">.text-info</div></div>
      <div class="cell cell-lg"><div class="tile text-special">.text-special</div></div>
      <div class="cell cell-lg"><div class="tile text-important">.text-important</div></div>
    </div>
    <div class="row tiles">
      <div class="cell cell-lg"><div class="tile text-green">.text-green</div></div>
      <div class="cell cell-lg"><div class="tile text-red">.text-red</div></div>
      <div class="cell cell-lg"><div class="tile text-yellow">.text-yellow</div></div>
      <div class="cell cell-lg"><div class="tile text-blue">.text-blue</div></div>
      <div class="cell cell-lg"><div class="tile text-purple">.text-purple</div></div>
      <div class="cell cell-lg"><div class="tile text-brown">.text-brown</div></div>
      <div class="cell cell-lg"><div class="tile text-black">.text-black</div></div>
      <div class="cell cell-lg"><div class="tile text-gray">.text-gray</div></div>
      <div class="cell cell-lg inverse"><div class="tile text-white">.text-white</div></div>
    </div>
  </div>
  <div class="box">
    <p>为浅色背景着色应用文本着色：<code>.text-tint</code></p>
  </div>
  <div class="container">
    <div class="row tiles">
      <div class="cell cell-lg"><div class="tile primary-pale text-tint">.primary-pale.text-tint</div></div>
      <div class="cell cell-lg"><div class="tile secondary-pale text-tint">.secondary-pale.text-tint</div></div>
      <div class="cell cell-lg"><div class="tile accent-pale text-tint">.accent-pale.text-tint</div></div>
      <div class="cell cell-lg"><div class="tile green-pale text-tint">.green-pale.text-tint</div></div>
      <div class="cell cell-lg"><div class="tile red-pale text-tint">.red-pale.text-tint</div></div>
      <div class="cell cell-lg"><div class="tile yellow-pale text-tint">.yellow-pale.text-tint</div></div>
      <div class="cell cell-lg"><div class="tile blue-pale text-tint">.blue-pale.text-tint</div></div>
      <div class="cell cell-lg"><div class="tile purple-pale text-tint">.purple-pale.text-tint</div></div>
      <div class="cell cell-lg"><div class="tile brown-pale text-tint">.brown-pale.text-tint</div></div>
    </div>
  </div>
</div>

<div class="section focus-item">
  <div class="heading">
    <div class="title"><strong>长阴影</strong></div>
  </div>
  <div class="box article">
    <p>为外观元素添加 <code>.long-shadow</code> 类来启用长阴影外观选项。</p>
    <div class="container">
      <div class="row tiles">
        <div class="cell"><div class="tile long-shadow primary">.primary</div></div>
        <div class="cell"><div class="tile long-shadow secondary">.secondary</div></div>
        <div class="cell"><div class="tile long-shadow accent">.accent</div></div>
        <div class="cell"><div class="tile long-shadow success">.success</div></div>
        <div class="cell"><div class="tile long-shadow danger">.danger</div></div>
        <div class="cell"><div class="tile long-shadow warning">.warning</div></div>
        <div class="cell"><div class="tile long-shadow info">.info</div></div>
        <div class="cell"><div class="tile long-shadow special">.special</div></div>
        <div class="cell"><div class="tile long-shadow important">.important</div></div>
      </div>
      <div class="row tiles">
        <div class="cell"><div class="tile green">.green</div></div>
        <div class="cell"><div class="tile long-shadow red">.red</div></div>
        <div class="cell"><div class="tile long-shadow yellow">.yellow</div></div>
        <div class="cell"><div class="tile long-shadow blue">.blue</div></div>
        <div class="cell"><div class="tile long-shadow purple">.purple</div></div>
        <div class="cell"><div class="tile long-shadow brown">.brown</div></div>
        <div class="cell"><div class="tile long-shadow black">.black</div></div>
      </div>
      <div class="row tiles">
        <div class="cell cell-lg"><div class="tile long-shadow primary-pale">.primary-pale</div></div>
        <div class="cell cell-lg"><div class="tile long-shadow secondary-pale">.secondary-pale</div></div>
        <div class="cell cell-lg"><div class="tile long-shadow accent-pale">.accent-pale</div></div>
        <div class="cell cell-lg"><div class="tile long-shadow success-pale">.success-pale</div></div>
        <div class="cell cell-lg"><div class="tile long-shadow danger-pale">.danger-pale</div></div>
        <div class="cell cell-lg"><div class="tile long-shadow warning-pale">.warning-pale</div></div>
        <div class="cell cell-lg"><div class="tile long-shadow info-pale">.info-pale</div></div>
        <div class="cell cell-lg"><div class="tile long-shadow special-pale">.special-pale</div></div>
        <div class="cell cell-lg"><div class="tile long-shadow important-pale">.important-pale</div></div>
      </div>
      <div class="row tiles">
        <div class="cell cell-lg"><div class="tile long-shadow green-pale">.green-pale</div></div>
        <div class="cell cell-lg"><div class="tile long-shadow red-pale">.red-pale</div></div>
        <div class="cell cell-lg"><div class="tile long-shadow yellow-pale">.yellow-pale</div></div>
        <div class="cell cell-lg"><div class="tile long-shadow blue-pale">.blue-pale</div></div>
        <div class="cell cell-lg"><div class="tile long-shadow purple-pale">.purple-pale</div></div>
        <div class="cell cell-lg"><div class="tile long-shadow brown-pale">.brown-pale</div></div>
        <div class="cell cell-lg"><div class="tile long-shadow gray">.gray</div></div>
        <div class="cell cell-lg"><div class="tile long-shadow white">.white</div></div>
      </div>
    </div>
  </div>
</div>

<div class="section focus-item">
  <div class="heading">
    <div class="title"><strong>状态外观</strong></div>
  </div>
  <div class="box article">
    <h5>触发状态：<code>.state</code></h5>
    <p>为元素启用状态外观，针对 <code>:hover</code>、<code>:focus</code>、<code>:active</code>会获得不同的样式。</p>
    <p><code>a</code> 和 <code>.btn</code> 默认启用状态外观。</p>
    <div class="has-padding-sm">
      <a class='btn'><i class="icon-star"></i>&nbsp; a:normal</a>
      <a class='btn hover'><i class="icon-star"></i>&nbsp; a:hover</a>
      <a class='btn focus'><i class="icon-star"></i>&nbsp; a:focus</a>
      <a class='btn active'><i class="icon-star"></i>&nbsp; a:active</a>
    </div>
    <div class="has-padding-sm">
      <a class='btn primary'><i class="icon-star"></i>&nbsp; .btn:normal</a>
      <a class='btn primary hover'><i class="icon-star"></i>&nbsp; .btn:hover</a>
      <a class='btn primary focus'><i class="icon-star"></i>&nbsp; .btn:focus</a>
      <a class='btn primary active'><i class="icon-star"></i>&nbsp; .btn:active</a>
    </div>
    <div class="has-padding-sm">
      <div class="box state space-xs">.state:normal</div>
      <div class="box state hover space-xs">.state:hover</div>
      <div class="box state focus space-xs">.state:focus</div>
      <div class="box state active space-xs">.state:active</div>
    </div>
    <hr class="space">
    <h5>禁用：<code>.disabled</code> &amp; <code>[disabled]</code></h5>
    <p>为元素应用禁用外观，元素（即便是文本框、按钮或链接）将不再响应鼠标事件，包括外观变化和 JavaScript 事件。</p>
    <a class='btn disabled'><i class="icon-star"></i>&nbsp; .disabled</a>
    <a class='btn disabled primary'><i class="icon-star"></i>&nbsp; .disabled</a>
    <hr class="space">
    <h5>弱化：<code>.muted</code></h5>
    <p>降低元素的透明度。</p>
    <p>正常文本段落</p>
    <p class="muted"><span class="code">.muted</span>: 弱化显示的文本段落</p>
    <p class="muted-light"><span class="code">.muted-light</span>: 轻微弱化显示的文本段落</p>
    <p class="muted-dark"><span class="code">.muted-dark</span>: 强力弱化显示的文本段落</p>
  </div>
</div>

<div class="section focus-item">
  <div class="heading"><div class="title"><strong>轮廓外观</strong></div></div>
  <div class="box">
    <p>为背景着色的标签应用 <code>.outline</code> 来添加轮廓外观。</p>
    <p>当 <code>.outline</code> 单独使用时仅仅为元素添加一个默认的边框样式。</p>
  </div>
  <div class="container has-padding">
    <div class="row tiles">
      <div class="cell cell-lg"><div class="tile outline">.outline</div></div>
      <div class="cell cell-lg"><div class="tile primary outline">.primary.outline</div></div>
      <div class="cell cell-lg"><div class="tile success outline">.success.outline</div></div>
      <div class="cell cell-lg"><div class="tile danger outline">.danger.outline</div></div>
      <div class="cell cell-lg"><div class="tile warning outline">.warning.outline</div></div>
      <div class="cell cell-lg"><div class="tile info outline">.info.outline</div></div>
      <div class="cell cell-lg"><div class="tile special outline">.special.outline</div></div>
      <div class="cell cell-lg"><div class="tile important outline">.important.outline</div></div>
      <div class="cell cell-lg"><div class="tile dark outline">.dark.outline</div></div>
      <div class="cell cell-lg"><div class="tile inverse outline">.inverse.outline</div></div>
    </div>
  </div>
  <div class="container inverse has-padding">
    <div class="row tiles">
      <div class="cell cell-lg"><div class="tile primary-pale outline">.primary-pale.outline</div></div>
      <div class="cell cell-lg"><div class="tile green-pale outline">.green-pale.outline</div></div>
      <div class="cell cell-lg"><div class="tile red-pale outline">.red-pale.outline</div></div>
      <div class="cell cell-lg"><div class="tile yellow-pale outline">.yellow-pale.outline</div></div>
      <div class="cell cell-lg"><div class="tile blue-pale outline">.blue-pale.outline</div></div>
      <div class="cell cell-lg"><div class="tile purple-pale outline">.purple-pale.outline</div></div>
      <div class="cell cell-lg"><div class="tile brown-pale outline">.brown-pale.outline</div></div>
      <div class="cell cell-lg"><div class="tile gray outline">.gray.outline</div></div>
      <div class="cell cell-lg"><div class="tile white outline">.white.outline</div></div>
    </div>
  </div>
  <div class="box">
    <p>为 <code>.outline</code> 元素添加 `.hover-solid` 类，可以实现鼠标悬停或着触摸时填充背景的效果。</p>
    <div class="container has-padding">
        <div class="row tiles">
          <div class="cell cell-lg"><div class="tile primary outline hover-solid">.primary.outline</div></div>
          <div class="cell cell-lg"><div class="tile success outline hover-solid">.success.outline</div></div>
          <div class="cell cell-lg"><div class="tile danger outline hover-solid">.danger.outline</div></div>
          <div class="cell cell-lg"><div class="tile warning outline hover-solid">.warning.outline</div></div>
          <div class="cell cell-lg"><div class="tile info outline hover-solid">.info.outline</div></div>
          <div class="cell cell-lg"><div class="tile special outline hover-solid">.special.outline</div></div>
          <div class="cell cell-lg"><div class="tile important outline hover-solid">.important.outline</div></div>
          <div class="cell cell-lg"><div class="tile dark outline hover-solid">.dark.outline</div></div>
          <div class="cell cell-lg"><div class="tile inverse outline hover-solid">.inverse.outline</div></div>
        </div>
      </div>
      <div class="container inverse has-padding">
        <div class="row tiles">
          <div class="cell cell-lg"><div class="tile primary-pale outline hover-solid">.primary-pale.outline</div></div>
          <div class="cell cell-lg"><div class="tile green-pale outline hover-solid">.green-pale.outline</div></div>
          <div class="cell cell-lg"><div class="tile red-pale outline hover-solid">.red-pale.outline</div></div>
          <div class="cell cell-lg"><div class="tile yellow-pale outline hover-solid">.yellow-pale.outline</div></div>
          <div class="cell cell-lg"><div class="tile blue-pale outline hover-solid">.blue-pale.outline</div></div>
          <div class="cell cell-lg"><div class="tile purple-pale outline hover-solid">.purple-pale.outline</div></div>
          <div class="cell cell-lg"><div class="tile brown-pale outline hover-solid">.brown-pale.outline</div></div>
          <div class="cell cell-lg"><div class="tile gray outline hover-solid">.gray.outline</div></div>
          <div class="cell cell-lg"><div class="tile white outline hover-solid">.white.outline</div></div>
        </div>
      </div>
  </div>
</div>

<div class="section focus-item">
  <div class="heading">
    <div class="title"><strong>容器</strong></div>
  </div>
  <div class="box gray article">
    <h5>画布：<code>.canvas</code></h5>
    <p>为标签应用主要背景色，通常为 <code>#FFF</code>。</p>
    <div class="canvas focus-item">我在一个 <code>.canvas</code> 内。</div>
    <hr class="space">
    <h5>盒子：<code>.box</code></h5>
    <p>为标签应用画布背景，设置基本内边距，设置边框但边框颜色为透明。</p>
    <div class="box focus-item">我在一个 <code>.box</code> 内。</div>
  </div>
  <div class="box article">
    <h5>层：<code>.layer</code></h5>
    <p>为标签应用画布背景，设置外阴影。</p>
    <div class="layer focus-item has-padding space">我在一个 <code>.layer</code> 内。</div>
    <p>默认阴影深度为 <code>.shadow-3</code>，可以通过阴影辅助类来更改阴影深度。</p>
    <div class="layer focus-item has-padding shadow-1 space">我在一个 <code>.layer.shadow-1</code> 内。</div>
    <div class="layer focus-item has-padding shadow-2 space">我在一个 <code>.layer.shadow-2</code> 内。</div>
    <div class="layer focus-item has-padding shadow-3 space">我在一个 <code>.layer.shadow-3</code> 内。</div>
  </div>
  <div class="box article">
    <h5>分段：<code>.section</code></h5>
    <p>为标签应用画布背景，设置较小的外阴影，增加下外边距。</p>
    <div class="section focus-item">
      我是在一个 <code>.section</code> 内。
    </div>
  </div>
  <div class="box article">
    <h5>坑：<code>.well</code></h5>
    <p>为标签应用内阴影，设置基本内边距，使用轻微的半透明黑色背景。</p>
    <div class="well focus-item">
      我是在一个 <code>.well</code> 内。
    </div>
  </div>
  <div class="box article">
    <a id="focusItemBtn" class="btn primary outline">提示当前页面使用的容器</a>
  </div>
</div>

<div class="section focus-item">
  <div class="heading"><div class="title"><strong>形状</strong></div></div>
  <table class="table borderless">
    <tbody>
      <tr>
        <td><code>.circle</code></td>
        <td>为元素应用 <code>50%</code> 的圆角样式<br>通常用在长宽相等的元素上来获得一个圆形外观。<br>部分控件会（例如按钮<code>.btn</code>）获得药丸外观。</td>
      </tr>
      <tr>
        <td><code>.rounded</code></td>
        <td>为元素应用基本的圆角样式。</td>
      </tr>
      <tr>
        <td><code>.rounded-sm</code></td>
        <td>为元素应用较小的圆角样式。</td>
      </tr>
      <tr>
        <td><code>.rounded-lg</code></td>
        <td>为元素应用较大的圆角样式。</td>
      </tr>
    </tbody>
  </table>
  <div class="container">
    <div class="row tiles">
      <div class="cell"><div class="btn primary circle"><i class="icon icon-star"></i></div></div>
      <div class="cell"><div class="tile btn success circle">.btn.circle</div></div>
      <div class="cell"><div class="tile success rounded">.rounded</div></div>
      <div class="cell"><div class="tile danger rounded-sm">.rounded-sm</div></div>
      <div class="cell"><div class="tile warning rounded-lg">.rounded-lg</div></div>
    </div>
  </div>
</div>

<div class="section focus-item">
  <div class="heading"><div class="title"><strong>分割线</strong></div></div>
  <table class="table borderless">
    <tbody>
      <tr>
        <td><code>.divider</code></td>
        <td>在元素下方应用边框</td>
      </tr>
      <tr>
        <td><code>.divider-top</code></td>
        <td>在元素上方应用边框</td>
      </tr>
      <tr>
        <td><code>.divider-right</code></td>
        <td>在元素右侧应用边框</td>
      </tr>
      <tr>
        <td><code>.divider-left</code></td>
        <td>在元素左侧应用边框</td>
      </tr>
      <tr>
        <td><code>.divider-all</code></td>
        <td>在元素四周应用边框</td>
      </tr>
      <tr>
        <td><code>.shadow-divider</code></td>
        <td>使用内部阴影绘制下边框，对于一些没有设置边框的元素动态设置阴影比较友好。</td>
      </tr>
      <tr>
        <td><code>.shadow-divider-outside</code></td>
        <td>使用外部阴影绘制下边框。</td>
      </tr>
    </tbody>
  </table>
</div>

<div class="section focus-item">
  <div class="heading"><div class="title"><strong>边距</strong></div></div>
  <table class="table borderless">
    <tbody>
      <tr>
        <td><code>.space</code></td>
        <td>在元素下方应用外边距</td>
      </tr>
      <tr>
        <td><code>.space-sm</code></td>
        <td>在元素下方应用较小的外边距</td>
      </tr>
      <tr>
        <td><code>.space-xs</code></td>
        <td>在元素下方应用更小的外边距</td>
      </tr>
      <tr>
        <td><code>.space-lg</code></td>
        <td>在元素下方应用较大的外边距</td>
      </tr>
      <tr>
        <td><code>.space-xl</code></td>
        <td>在元素下方应用更大的外边距</td>
      </tr>
      <tr>
        <td><code>.no-margin</code></td>
        <td>为元素移除外边距</td>
      </tr>
      <tr>
        <td><code>.has-margin</code></td>
        <td>为元素四个方向应用外边距</td>
      </tr>
      <tr>
        <td><code>.has-margin-sm</code></td>
        <td>为元素四个方向应用较小的外边距</td>
      </tr>
      <tr>
        <td><code>.no-padding</code></td>
        <td>为元素移除内边距</td>
      </tr>
      <tr>
        <td><code>.has-padding</code></td>
        <td>为元素四个方向应用内边距</td>
      </tr>
      <tr>
        <td><code>.has-padding-xs</code></td>
        <td>为元素四个方向应用超小的内边距</td>
      </tr>
      <tr>
        <td><code>.has-padding-sm</code></td>
        <td>为元素四个方向应用较小的内边距</td>
      </tr>
      <tr>
        <td><code>.has-padding-lg</code></td>
        <td>为元素四个方向应用大的内边距</td>
      </tr>
      <tr>
        <td><code>.has-padding-xl</code></td>
        <td>为元素四个方向应用超超大的内边距</td>
      </tr>
      <tr>
        <td><code>.has-padding-v</code></td>
        <td>为元素上下两个方向应用内边距</td>
      </tr>
      <tr>
        <td><code>.has-padding-h</code></td>
        <td>为元素左右两个方向应用内边距</td>
      </tr>
    </tbody>
  </table>
</div>

<div class="section focus-item">
  <div class="heading">
    <div class="title"><strong>加载指示器</strong>：<code>.loading</code></div>
  </div>
  <div class="box article">
    <p>为元素应用加载指示器，并隐藏内部内容。</p>
    <p><code>.loading-light</code> 应用在浅色背景元素上，同时 <code>.loading</code> 不可省略。</p>
    <a class="btn can-loading loading-light loading-btn">点我加载</a>
    <a class="btn primary can-loading loading-btn">点我加载</a>
  </div>
</div>

<div class="section focus-item">
  <div class="heading">
    <div class="title"><strong>变形</strong></div>
  </div>
  <table class="table borderless">
    <tbody>
      <tr>
        <td><code>.rotate-90</code></td>
        <td>顺时针旋转 90度</td>
      </tr>
      <tr>
        <td><code>.rotate-180</code></td>
        <td>顺时针旋转 180度</td>
      </tr>
      <tr>
        <td><code>.rotate-270</code></td>
        <td>顺时针旋转 270度</td>
      </tr>
      <tr>
        <td><code>.flip-h</code></td>
        <td>水平翻转</td>
      </tr>
      <tr>
        <td><code>.flip-v</code></td>
        <td>垂直翻转</td>
      </tr>
    </tbody>
  </table>
  <div class="box">
    <a class="btn rotate-90"><i class="icon-flag"></i> 正</a>
    <a class="btn rotate-180"><i class="icon-flag"></i> 正</a>
    <a class="btn rotate-270"><i class="icon-flag"></i> 正</a>
    <a class="btn flip-h"><i class="icon-flag"></i> 正</a>
    <a class="btn flip-v"><i class="icon-flag"></i> 正</a>
  </div>
</div>

<div class="section focus-item">
  <div class="heading">
    <div class="title"><strong>阴影</strong></div>
  </div>
  <table class="table borderless">
    <tbody>
      <tr>
        <td><code>.shadow-none</code></td>
        <td>移除元素上的阴影设置</td>
      </tr>
      <tr>
        <td><code>.shadow</code> &amp; <code>.shadow-1</code></td>
        <td>应用阴影</td>
      </tr>
      <tr>
        <td><code>.shadow-2</code></td>
        <td>应用较大深度的阴影</td>
      </tr>
      <tr>
        <td><code>.shadow-3</code></td>
        <td>应用更大深度的阴影</td>
      </tr>
      <tr>
        <td><code>.text-shadow-white</code></td>
        <td>为元素文本应用白色阴影</td>
      </tr>
      <tr>
        <td><code>.text-shadow-black</code></td>
        <td>为元素文本应用黑色阴影</td>
      </tr>
    </tbody>
  </table>
  <div class="box article">
    <p class="has-padding shadow-1">.shadow-1</p>
    <p class="has-padding shadow-2">.shadow-2</p>
    <p class="has-padding shadow-3">.shadow-3</p>
    <p class="has-padding text-shadow-white gray">.text-shadow-white</p>
    <p class="has-padding text-shadow-black">.text-shadow-black</p>
  </div>
</div>

<div class="section focus-item">
  <div class="heading"><div class="title"><strong>滤镜</strong></div></div>
  <div class="box article">
    <p>模糊滤镜：<code>.blur</code></p>
    <p><code>.blur-lg</code> 应用较大的模糊半径，<code>.blur-sm</code> 应用较小的模糊半径。</p>
    <a class='btn green blur-sm'><i class="icon-star"></i> 一个模糊的内容</a>
    <a class='btn red blur'><i class="icon-star"></i> 一个模糊的内容</a>
    <a class='btn yellow blur-lg'><i class="icon-star"></i> 一个模糊的内容</a>
    <hr class="space">
    <p>灰度滤镜：<code>.grayscale</code></p>
    <p>元素以灰度色彩显示。</p>
    <a class='btn primary grayscale'><i class="icon-star"></i>&nbsp; 我是一个 .primary 按钮</a>
  </div>
</div>

<div class="section focus-item">
  <div class="heading"><div class="title"><strong>综合应用</strong></div></div>
  <div class="box">
    <p>除背景着色和文本着色外观类仅能同时存在一个，其他所有外观选项都可以搭配使用来获得更加复杂的外观效果。</p>
    <hr class="space">
    <div class='box danger rounded shadow-1'>
      <p class="lead">Hello world!</p>
      <p>这是使用 .box.danger.rounded.shadow 来实现浮现的消息框外观。</p>
    </div>
  </div>
</div>


<script>
$(function() {
  $('#focusItemBtn').on($.TapName, function(e) {
      var focusClass = 'show-focus-item',
          $body = $('body').toggleClass(focusClass);
      if($body.hasClass(focusClass)) {
          $(document).one($.TapName, function() {
              $body.removeClass(focusClass);
          });
      }
      e.stopPropagation();
  });

  $('.loading-btn').click(function() {
    $(this).toggleClass('loading');
  });
});
</script>
